<template>
  <div class="artcleEdit">
    <!-- 我的频道 -->
    <div class="myChannels">
      <van-cell title="我的频道">
        <van-button
          v-show="!isEditShow"
          @click="isEditShow=true"
          class="ChannelsEdit"
          plain
          type="danger"
          size="mini"
          round
        >编辑</van-button>
        <van-button
          v-show="isEditShow"
          @click="editFinish"
          class="ChannelsEdit"
          plain
          type="danger"
          size="mini"
          round
        >完成</van-button>
      </van-cell>

      <van-grid :gutter="10" :column-num="3">
        <van-grid-item
          v-for="(item,index) in channel"
          :key="item.id"
          @click="delChannel(index,item.id)"
        >
          <!-- 文字 -->
          <div
            class="delChannel van-ellipsis"
            slot="text"
            :class="{active:active===item.id}"
          >{{item.name}}</div>
          <!-- 图标 -->
          <van-icon
            v-show="isEditShow && !fixedChannel.includes(item.id)"
            class="delIcon"
            name="clear"
            slot="icon"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 频道推荐 -->
    <div class="ChannelRecommend">
      <van-cell title="频道推荐"></van-cell>
      <van-grid :gutter="10" :column-num="3">
        <van-grid-item @click="addChannel(item)" v-for="item in filterChannel" :key="item.id">
          <!-- 文字 -->
          <div class="pushChannel van-ellipsis" slot="text">
            <i class="iconfont icon-guanbi"></i>
            {{item.name}}
          </div>
          <!-- 图标 -->
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, delMyChannels } from "@/api/axios";
export default {
  name: "ArtcleEdit",
  data() {
    return {
      fixedChannel: [0], // 频道白名单不允许删除的频道
      isEditShow: false, //编辑按钮与删除图标的显示与隐藏
      AllChannels: [] //所有的频道列表
    };
  },
  methods: {
    //   获取所有的频道
    async getAllChannel() {
      try {
        const { data: res } = await getAllChannels();
        // console.log(res);
        this.AllChannels = res.data.channels;
        // console.log(this.AllChannels, 888);
      } catch (err) {
        // console.log(err);
        this.$toast.fail("获取用户数据失败，请稍后重试！");
      }
    },
    addChannel(item) {
      // 只在编辑的状态下触发
      if (this.isEditShow) {
        // 将传入的频道对象 存入我的频道中
        // console.log(item);
        this.channel.push(item);
      } else {
        return;
      }
    },
    async delChannel(index, id) {
      if (this.isEditShow) {
        //删除状态
        // 推荐频道不能删
        if (id === 0) {
          return;
        }

        if (this.$store.state.login.userToken) {
          // 登录状态则请求服务器

          const { data: res } = await delMyChannels(id);
          console.log(res);
          // 1.删除对应的频道---依据数组遍历的索引的值
          this.channel.splice(index, 1);
        } else {
          //未登录状态==== 将频道信息是存入本地
          // console.log("未登录状态");
          window.localStorage.setItem("CHANNELS", JSON.stringify(this.channel));
          // 1.删除对应的频道---依据数组遍历的索引的值
          this.channel.splice(index, 1);
        }

        // 高亮显示
        if (this.active == id) {
          this.$emit("TOGGLE", {
            id: this.channel[index - 1].id,
            status: this.isEditShow
          });
        }
      } else {
        //点击切换状态
        this.$emit("TOGGLE", { id: id, status: this.isEditShow });
      }
    },
    //   编辑完成
    async editFinish() {
      // 1.隐藏完成按钮
      this.isEditShow = false;
    }
  },
  // 传入的我的频道
  props: {
    channel: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  created() {
    this.data = this.channel;
    this.getAllChannel();
    // console.log(this.channel, 999);
  },
  computed: {
    // 计算是属性的方式====过滤数组重复
    filterChannel() {
      return this.AllChannels.filter(item => {
        return (
          this.channel.findIndex(i => {
            return i.id === item.id;
          }) === -1
        );
      });
    }
  }
};
</script>

<style scoped lang='less'>
.artcleEdit {
  margin-top: 105px;
  padding: 0 24px;

  .van-cell__title {
    font-size: 32px;
    color: #333333;
  }
  /deep/ .van-grid-item {
    width: 160px;
    height: 86px;
    border-radius: 6px;
    padding: 0;
    .van-grid-item__content {
      padding: 0;
      background-color: #f4f5f6;
      .delChannel,
      .pushChannel {
        width: 100%;
        height: 86px;
        line-height: 86px;
        text-align: center;
        font-size: 32px;
      }
    }
    .van-grid-item__icon-wrapper {
      position: unset;
    }
  }
  // 我的频道
  .myChannels {
    .ChannelsEdit {
      width: 105px;
    }
    .delChannel.active {
      color: red;
    }
    .delIcon {
      font-size: 28px;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
      border-radius: 50%;
      z-index: 2;
      color: #cacaca;
    }
  }
  //频道推荐
  .ChannelRecommend {
    .pushChannel {
      padding: 0 10px;

      .iconfont {
        font-size: 12px;
        vertical-align: middle;
        display: inline-block;
        transform: rotateZ(45deg);
        margin-right: 5px;
      }
    }
  }
}
</style>